<template>
    <div>
        <search-table
            :columns="columns" 
            :data="list"
            :total="total"
            :page.sync="queryInfo.pageIndex"
            :size.sync="queryInfo.pageSize"
            @change-size="changeSize"
            @change-page="changePage">
            <template slot="button-group">
                <Button v-if="type === 'file'" :disabled="list.length === 0" type="primary" ghost @click="downloadAllReport()">打包下载所有文件</Button>
                <Button v-if="type === 'record'" :disabled="list.length === 0" type="primary" ghost @click="downloadDrillReport()">导出演练报告</Button>
            </template>
            <!-- <template slot="select-group" v-if="type === 'report'">
                <Select filterable v-model="queryInfo.docType" clearable @on-change="debounceSearch" placeholder="类型">
                    <Option value="0" key="true">文档</Option>
                    <Option value="1" key="false">富文本</Option>
                </Select>
            </template> -->
            <template slot="input-group" v-if="type === 'file'">
                <Input v-model="queryInfo.name" placeholder="名称" @on-change="debounceSearch" clearable/>
            </template>
        </search-table>
        <package-progress
            :show="progress.show"
            :progress="progress.progress"
            :status="progress.status"
            @change="change"
            title="下载进度"
        ></package-progress>
        <Modal v-model="detailModal.show" :title="`${detailModal.title || ''}内容详情`" footer-hide>
            <div v-html="detailModal.content" style="font-size:14px;" class="noticeContent">
            </div>
        </Modal>
    </div>
</template>
<script>
import SearchTable from '@/components/SearchTable/SearchTable'
import PackageProgress from '@/components/package-progress/package-progress.vue'
import TableTooltip from '@/view/drill_compete/page/tableTooltip.vue'
import { debounce } from '@/libs/utils'
import { downloadSummarize,delSummarize,getCompeteSummarize, downloadDrillReport}  from '@/api/drill.js'
export default{
    name:'SummaryReport',
    components:{SearchTable,PackageProgress,TableTooltip},
    props:{
        type:{
            required:true,
        },
        disabledAllBtn:{
            type:Boolean,
            default:false
        }
    },
    data(){
        return{
            detailModal:{
                show:false,
                content:'',
                title:''
            },
            progress:{
                show:false,
                progress:0,
                status:'active'
            },
            queryInfo:{
                pageIndex:1,
                pageSize:10,
                type:this.type,
                sceneId:this.$route.query.id
            },
            list:[],
            columns:[
                {
                    key:'name',
                    title:'名称',
                    placement:'top-left',
                    show:this.type === 'file'
                },
                // {
                //     key:'fileName',
                //     title:'文件名',
                //     show:this.type === 'file'
                // },
                // {
                //     key:'type',
                //     title:'类型',
                //     show:this.type === 'report',
                //     render:(h,params) => {
                //         return h('span',params.row.remark ? '富文本' : '文档')
                //     }
                // },
                {
                    key:'creatorName',
                    title:'创建者',
                    width:100,
                    tooltip:true,
                    placement:'top-left',
                    show:this.type !== 'record'
                },
                {
                    key:'createTime',
                    title:'创建时间',
                    width:140,
                },
                {
                    key:'stepName',
                    title:'步骤',
                    width:200,
                    tooltip:true,
                    placement:'top-left'
                },
                {
                    type:'html',
                    key:'remark',
                    title:'内容',
                    show:this.type !== 'file',
                    render:(h,params) => {
                        return h('span',{
                            class:'inline-html html-ellipsis',
                            domProps:{
                                innerHTML:params.row.remark || '无'
                            },
                            on:{
                                'click':(e) => {
                                    this.showDetail(params.row)
                                }
                            }
                        })
                    }
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 160,
                    align: 'left',
                    ellipsis: true,
                    placement: 'top-right',
                    order: 2,
                    opList:[
                        {
                            txt:'预览',
                            disabled: (data) => this.disabledAllBtn || !data.fileId,
                            show:this.type === 'file' ? '' : 'none',
                            on:{
                                click:(data)=>{
                                    //新的预览接口
                                    window.open(`/api/minio/filePreview?id=${data.fileId}`);
                                    return;
                                }
                            }
                        },
                        {
                            txt:'下载',
                            show:this.type === 'file' ? '' : 'none',
                            disabled: (data) => this.disabledAllBtn || !data.fileId,
                            on:{
                                click:(data) => {
                                    this.downLoadFile(data.fileId)
                                }
                            }
                        },
                        {
                            type:'delete',
                            txt:'删除',
                            tooltip:true,
                            title: '确定要删除吗?',
                            disabled: () => this.disabledAllBtn,
                            on:{
                                click:(data) => {
                                    this.delSummarize(data.id)
                                }
                            }
                        }
                    ],
                    // render: (h, params) => {
                    //     return h('div', [
                    //         h('Button',{
                    //         props: {
                    //             type: 'text',
                    //             size: 'small',
                    //             disabled: this.disabledAllBtn || !params.row.fileId
                    //         },
                    //         attrs: {
                    //             title: '预览'
                    //         },
                    //         style: {
                    //             background: 'none',
                    //             border: 'none',
                    //             boxShadow: 'none',
                    //             display:this.type === 'file' ? '' : 'none'
                    //         },
                    //         on:{
                    //             click:()=>{
                    //                 //新的预览接口
                    //                 window.open(`/api/minio/filePreview?id=${params.row.fileId}`);
                    //                 return;
                    //             }
                    //         }
                    //         }, [
                    //             h('img', {
                    //                 attrs: {
                    //                     src: params.row.fileId ? require('../../../../assets/project/magnifier-h.png') : require('../../../../assets/project/magnifier-s.png')
                    //                 },
                    //                 style: {
                    //                     height:'22px',
                    //                     cursor: 'pointer',
                    //                     'vertical-align': 'middle',
                    //                     display:'inline-block',
                    //                     marginBottom:'4px',
                    //                 },
                    //             })
                    //         ]),
                    //         h('Button', {
                    //                 props: {
                    //                     type: 'text',
                    //                     size: 'small',
                    //                     disabled: !params.row.fileId
                    //                 },
                    //                 attrs: {
                    //                     title: '下载'
                    //                 },
                    //                 style: {
                    //                     background: 'none',
                    //                     border: 'none',
                    //                     boxShadow: 'none',
                    //                     display:this.type === 'file' ? '' : 'none'
                    //                 },
                    //                 on:{
                    //                     click:() => {
                    //                         this.downLoadFile(params.row.fileId)
                    //                     }
                    //                 }
                    //             }, [
                    //             h('img', {
                    //                 attrs: {
                    //                     src: params.row.fileId ? require('../../../../assets/project/download-h.png') : require('../../../../assets/project/download-s.png')
                    //                 },
                    //                 style: {
                    //                     height:'22px',
                    //                     cursor: 'pointer',
                    //                     'vertical-align': 'middle',
                    //                     display:'inline-block',
                    //                     marginBottom:'4px',
                    //                 },
                    //             })
                    //         ]),
                    //         h('Poptip', {
                    //             props: {
                    //                 confirm: true,
                    //                 'ok-text': "确定",
                    //                 'cancel-text': "取消",
                    //                 type: 'error',
                    //                 size: 'large',
                    //                 title: '确定要删除吗?',
                    //                 transfer: true
                    //             },
                    //             style: {
                    //                 marginLeft: '0px'
                    //             },
                    //             on: {
                    //                 'on-ok': () => {
                    //                     this.delSummarize(params.row.id)
                    //                 }
                    //             }
                    //         }, [
                    //             h('Button', {
                    //                 props: {
                    //                     type: 'text',
                    //                     size: 'small',
                    //                     disabled: this.disabledAllBtn
                    //                 },
                    //                 attrs: {
                    //                     title: '删除'
                    //                 },
                    //                 style: {
                    //                     //              marginRight: '5px',
                    //                     background: 'none',
                    //                     border: 'none',
                    //                     boxShadow: 'none'
                    //                 },
                    //             }, [
                    //                 h('img', {
                    //                     attrs: {
                    //                         src: !this.disabledAllBtn ? require('../../../../assets/project/delNote-h.png') : require('../../../../assets/project/delNote-d.png'),
                    //                     },
                    //                     style: {
                    //                         cursor: 'pointer',
                    //                         'margin-right': '5px',
                    //                         'vertical-align': 'middle',
                    //                         display: 'inline-block',
                    //                         marginBottom: '4px',
                    //                     },
                    //                 }),
                    //                 h('span', {
                    //                     style: {
                    //                         cursor: 'pointer',
                    //                         color: !this.disabledAllBtn ? '#2d8cf0' : '#c5c8ce'
                    //                     },
                    //                 })
                    //             ])
                    //         ])

                    //     ])
                    // }
                }
            ],
            total:0
        }
    },
    mounted(){
        this.getCompeteSummarize();
    },
    methods:{
        getCompeteSummarize(){
            getCompeteSummarize(this.queryInfo).then(({code,data,message}) => {
                if(code === 1){
                    this.list = data.items;
                    this.total = data.total
                }else{
                    this.list = [];
                    this.total = 0;
                    this.$Message.error(message)
                }
            }).catch(error => {
                console.log(error)
            })
        },
        debounceSearch:debounce(function(){
            this.changePage(1);
        },500),
        changePage(page){
            this.queryInfo.pageIndex = page;
            this.getCompeteSummarize();
        },
        changeSize(size){
            this.queryInfo.pageSize = size;
            this.getCompeteSummarize();
        },
        delSummarize(id){
            delSummarize(id).then(({code,message}) => {
                if(code === 1){
                    this.$Message.info('删除成功')
                    if(this.list.length === 1 && this.queryInfo.pageIndex > 1){
                        this.queryInfo.pageIndex --;
                    }
                    this.getCompeteSummarize();
                }else{
                    this.$Message.error(message)
                }
            }).catch(error => {
                console.log(error)
            })
        },
        downLoadFile(id){
            window.open(`/api/minio/download/${id}`);
        },
        downloadDrillReport(){
            let sceneId = this.$route.query.id;
            // window.open(`/api/compete/summarize/exportWord/${sceneId}`);
            // return
            this.progress.show = true
            downloadDrillReport(sceneId,this.downFileProgress).then(data => {
                this.totalProgress = 0
                if(data.type == 'application/octet-stream'){
                    const downloadElement = document.createElement("a");
                    const href = window.URL.createObjectURL(data);
                    downloadElement.href = href;
                    downloadElement.download = `${this.$route.query.name}演练报告.docx`;
                    document.body.appendChild(downloadElement);
                    downloadElement.click();
                    document.body.removeChild(downloadElement); // 下载完成移除元素
                    window.URL.revokeObjectURL(href); // 释放掉blob对象
                }else{
                    this.$Message.error('下载报告失败!');
                }
            }).catch(error => {
                this.progress.status = 'wrong'
                this.$Message.error('下载报告失败!');
            }).finally(() => {
                this.progress.progress = 100
                setTimeout(() => {
                    this.progress.show = false
                    this.progress.status = 'active'
                    this.progress.progress = 0
                }, 2000)
            })
        },
        downloadAllReport(){
            let sceneId = this.$route.query.id;
            this.progress.show = true
            downloadSummarize(sceneId,this.type,[],this.downFileProgress).then(data => {
                this.totalProgress = 0
                if(data.type == 'application/octet-stream'){
                    const downloadElement = document.createElement("a");
                    const href = window.URL.createObjectURL(data);
                    downloadElement.href = href;
                    downloadElement.download = '演练归档.zip';
                    document.body.appendChild(downloadElement);
                    downloadElement.click();
                    document.body.removeChild(downloadElement); // 下载完成移除元素
                    window.URL.revokeObjectURL(href); // 释放掉blob对象
                }else{
                    this.$Message.error('下载文件失败!不存在文件数据！');
                }
            }).catch(error => {
                this.progress.status = 'wrong'
                this.$Message.error('下载文件失败!');
            }).finally(() => {
                this.progress.progress = 100
                setTimeout(() => {
                    this.progress.show = false
                    this.progress.status = 'active'
                    this.progress.progress = 0
                }, 2000)
            })
        },
        downFileProgress(progress){
            let currentProgress = progress.loaded * 1; //B单位
            if (this.totalProgress) {
                this.totalProgress += currentProgress
            } else {
                this.totalProgress = currentProgress
            }
            currentProgress = this.totalProgress - currentProgress ? currentProgress : currentProgress / 2;
            let rate = (((this.totalProgress-currentProgress)/this.totalProgress)*100).toFixed(2)*1;
            if(!this.rate || rate > this.rate){
                this.progress.progress = rate;
            }
        },
        change(val) {
            this.progress.show = val
        },
        showDetail(data){
            this.detailModal.show = true;
            this.detailModal.content = data.remark;
            this.detailModal.title = data.name;
        }
    }
}
</script>
<style>
.inline-html {
    max-width:600px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    word-break: break-all;
    display: inline-block;
    vertical-align: middle;
    color:#1563C2 ;
    cursor: pointer;
}
.inline-html * {
    display: inline-block;
    margin: 0px;
}

.inline-html img {
    max-height: 22px;
    vertical-align: middle;
}

.noticeContent {
    word-break: break-all;
    white-space: pre-wrap;
}
	
.noticeContent img {
    max-width: 100%;
}

.noticeContent pre {
    white-space: normal;
}
.html-ellipsis,
.html-ellipsis * {
    font-size: 14px;
}
.html-ellipsis {
    display: inline-block;
}
.html-ellipsis * {
    display: inline !important;
}
.html-ellipsis img {
    max-height: 20px;
}
.html-ellipsis sup {
    top: 0;
}
.html-ellipsis sub {
    bottom: 0;
}
.html-ellipsis br {
    display: none !important;
}
.noticeContent .ql-align-center{
    text-align: center;
}
</style>